import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


//button
class  OwlButton extends  PolymerElement{

    ready(){

        super.ready();
        this.addEventListener('click',this.toggle);
        let colortype= this.color;
        let color="rgba(62,114,255,0.8)";
        switch (colortype) {
            case "default":
                color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                color="rgba(34,36,40,0.8)";
                break;
            case "light":
                color="rgba(215,216,218,0.8)";
                break;
            case "success":
                color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                color="rgba(255,209,0,0.8)";
                break;
            default:
                break;
        }

        this.$.btn.style.backgroundColor=color;

        let size=this.size;
        let btnw="";
        let btnh=0;
        let fontsize=0;

        switch (size) {

            case "default":
                btnw="80px";
                btnh=36;
                fontsize=16;
                break;
            case "large":
                btnw="110px";
                btnh=48;
                fontsize=24;
                break;
            case "small":
                btnw="60px";
                btnh=28;
                fontsize=12;
                break;
            default:
                break;
        }
        this.$.btn.style.width=btnw;
        this.$.btn.style.height=btnh+"px";
        this.$.txt.style.fontSize=fontsize+"px";
        this.$.txt.style.marginTop=-(this.$.txt.offsetHeight/2)+"px";


    }
    static get properties() { return {
        mood: {

            type: String,
            value: "ABC"

        },
        color:{

            type:String,
            value:'default'

        },

        size:{

            type:String,
            value:'default'

        }
    }};

    static get template() {

        return html`
          <style> 
    
        
        .owl-btn{
          
              width: 80px;
              height:40px;
              margin: 4px;
              color: white;
              border-radius: 6px;
              box-shadow: 0.1px 0.1px 2px rgba(120,120,120,0.6);
          }
          
          .owl-btn:active{
           
               opacity: 0.6;
          }
          
          .owl-btn p{
          
             width: 100%;
             text-align: center;
             font-size: 16px;
             margin: 0px;
             padding: 0px;
             position: relative;
             display:inline-block;
             top: 50%;
          }
           </style>
        
        <div class="owl-btn" id="btn">
             <p id="txt"><slot></slot></p>
         </div>
       
        `;
    }

    toggle(){


    }

}

customElements.define("owl-button",OwlButton);


class owlSwitch extends PolymerElement {


    constructor(){

        super();
        this.flag=false;
    }

    ready(){

        super.ready();

        if(this.checked=="true"){

            this.$.owlcon.style.marginLeft="27px";
            let colortype= this.color;
            let color="";
            switch (colortype) {
                case "default":
                    color="rgba(62,114,255,0.8)";
                    break;
                case "secondary":
                    color="rgba(0,214,236,0.8)";
                    break;
                case "danger":
                    color="rgba(255,0,43,0.8)";
                    break;
                case "dark":
                    color="rgba(34,36,40,0.8)";
                    break;
                case "light":
                    color="rgba(215,216,218,0.8)";
                    break;
                case "success":
                    color="rgba(0,234,97,0.8)";
                    break;
                case "warning":
                    color="rgba(255,209,0,0.8)";
                    break;
                default:
                    break;
            }
            this.$.switchbg.style.backgroundColor=color;
            this.flag=true;
        }


    }
    connectedCallback(){

        super.connectedCallback();
    }
    static get properties() { return {

        checked:{

            type:String,
            value:"false",
            notify:true,
            reflectToAttribute:true
        },
        color:{

            type:String,
            value:"default"
        },

    }};


    toggle(e){


        console.log(this.flag)
        if(!this.flag){

            e.composedPath()[0].style.marginLeft="27px";
            let colortype= this.color;
            let color="";
            switch (colortype) {
                case "default":
                    color="rgba(62,114,255,0.8)";
                    break;
                case "secondary":
                    color="rgba(0,214,236,0.8)";
                    break;
                case "danger":
                    color="rgba(255,0,43,0.8)";
                    break;
                case "dark":
                    color="rgba(34,36,40,0.8)";
                    break;
                case "light":
                    color="rgba(215,216,218,0.8)";
                    break;
                case "success":
                    color="rgba(0,234,97,0.8)";
                    break;
                case "warning":
                    color="rgba(255,209,0,0.8)";
                    break;
                default:
                    break;
            }
            e.composedPath()[1].style.backgroundColor=color;

        }else{

            e.composedPath()[0].style.marginLeft="0px";
            e.composedPath()[1].style.backgroundColor="rgba(255,255,255,1)";

        }
        this.flag=!this.flag;

    }


    getValue(){


        return this.flag;
    }

    setValue(flag){

        this.toggle(this);
    }


    static get template() {
        return html`
             <style>
       
              .owl-switch{
                
                width: 68px;
                height: 40px;
                background-color: rgba(120,120,120,0.4);
                border-radius: 20px;
                position: static;
                  
              }
              
              .owl-switch .switch-bg{
               
                width: 64px;
                height: 37px;
                background-color: rgba(120,120,120,0.5);
                position: absolute;
                margin-top: 1.5px;
                border-radius: 20px;
                background-color: white;
                margin-left: 2px;
              }

             .owl-switch .switch-contrl{
                 
                 width: 37px;
                 height: 37px;
                 background-color: white;
                 border-radius: 50%;
                 box-shadow: 0.6px 0.6px 8px 0.2px rgba(120,120,120,0.8);
                 transition: all 0.04s ease-in;
               
              }

            </style>
        
           <div class="owl-switch">
                 <div class="switch-bg" id="switchbg">
                     <div id="owlcon" class="switch-contrl" on-click="toggle"></div>
                 </div>
        
            </div>
                    
                 
        `;
    }


}

customElements.define("owl-switch",owlSwitch);


class  OwlBadge extends  PolymerElement{


    ready(){

        super.ready();

        let colortype= this.color;
        let color="rgba(62,114,255,0.8)";
        switch (colortype) {
            case "default":
                color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                color="rgba(34,36,40,0.8)";
                break;
            case "light":
                color="rgba(215,216,218,0.8)";
                break;
            case "success":
                color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                color="rgba(255,209,0,0.8)";
                break;
            default:
                break;
        }
        this.$.badge.style.backgroundColor=color;
        this.$.badge.innerText=this.count;
    }
    static get properties() { return {

        color:{

            type:String,
            value:'default'
        },
        count:{

            type: String,
            value: "0"
        },
        size:{

            type:String,
            value:'default'

        }
    };
    }


    getValue(){


        return parseInt(this.count);
    }

    setValue(v){

        this.count=v;
        this.$.badge.innerText=v;
    }


    static get template() {

        return html`
          <style> 
   
        .owl-badge{
          
              padding: 4px;
              color: white;
              max-width: 46px;
              border-radius: 12px;
              box-shadow: 0.1px 0.1px 2px rgba(120,120,120,0.6);
              text-align: center;
          }
         
           </style>
        
        <div class="owl-badge" id="badge">
         </div>
       
        `;
    }

}
customElements.define("owl-badge",OwlBadge);



class OwlInput extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();
        if(this.imgsrc=='owl-img/input/user1.png'||this.imgsrc==null){


        }else{

            this.$.imgInputsrc.src=this.imgsrc;

        }
    }
    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this.toggle);

    }
    static get properties() { return {

        imgsrc:{

            type:String,
            value:'owl-img/input/user1.png'
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
           .owl-input{
           
              width: auto;
              height: 40px;
              /*background-color: yellow;*/
              padding-left: 12px;
              padding-right: 12px;
              margin-left: 100px;
              display: flex;
              margin-bottom: 120px;
           }
           
           .imgtype{
           
             width: 60px;
             height: 60px;
             /*background-color: yellow;*/
             margin-right: 12px;
           }
           
           .imgtype img{
           
              width: 52px;
              height: 52px;
              margin-top: 4px;
              
           
           }
           
           
           #input::slotted(input){
           
              /*background-color: rgba(120,120,120,0.2);*/
              padding-left: 8px!important;
              width: 100%;
          
              height: 40px;
              /*border-radius: 4px;*/
              /*font-size: 1.4rem;*/
              
              font-size:1.4em;
              height:2.7em;
              border-radius:8px;
              border:1px solid #c8cccf;
              /*color:#6a6f77;*/
              outline:none;
           
           }
           
          
           
            </style>
        
         <div class="owl-input">
         <div  class="imgtype" >
             <img src="owl-img/input/user1.png" id="imgInputsrc">
         </div>
            <slot id="input"></slot>
            
         </div>
        `;
    }

    toggle(){


    }

}

customElements.define("owl-input",OwlInput);



class OwlIcon extends PolymerElement {


    constructor(){

        super();

    }

    ready(){

        super.ready();
        if(this.normalSrc==null){

            this.$.imgStart.src=normalSrc;
        }
    }

    connectedCallback(){

        super.connectedCallback();
        this.addEventListener('click',this._toggleStart);

    }
    static get properties() { return {

        normalSrc:{

            type:String,
            value:""
        },
        activeSrc:{

            type: String,
            value: ""
        },
        checked:{

            type:String,
            value:"false"
        }
    }};



    _toggleStart(){

        if(this.checked=="false"){

            this.$.imgStart.src=this.activeSrc;
        }else{

            this.$.imgStart.src=this.normalSrc;
        }
        this.flag=!this.flag;
    }


    getChecked(){

        return this.checked=="false"? false:true;
    }

    setChecked(v){

        if(v){
            this.$.imgStart.src=this.activeSrc;
        }else{
            this.$.imgStart.src=this.normalSrc;
        }
        this.checked=v.toString();
    }

    static get template() {
        return html`
             <style>
             
              .owl-start{
                
                  width: 40px;
                  height: 40px;
              }
              
              .owl-start img{
              
                  width: 100%;
                  height: 100%;
              }
             
            </style>
        
                <div class="owl-start">
                   <img id="imgStart" src="./owl-img/extends/owl-start.png"></img>
                </div>
        `;
    }


}

customElements.define("owl-icon",OwlIcon);


class OwlMeteor extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

        let meteor=this.$.meteor;

        for(let i=0;i<30;i++){

            let newMeteor=document.createElement("div");
            newMeteor.className="star";
            newMeteor.style.top=this.randDistance(30,-30)+"px";
            newMeteor.style.left=this.randDistance(150,20)+"px";
            meteor.appendChild(newMeteor);
        }

        let meteorItem=this.$.meteor.children;
        for(let j=0,len=meteorItem.length;i<len;j++){

            if(j%6==0){

                meteorItem[j].style.animationDelay='0s';
            }else{

                meteorItem[j].style.animationDelay=i*0.8+'s';
            }
        }

    }


    randDistance(max,min){



        let distance=Math.floor(Math.random()*(max-min-1)*10+min);
        return distance;

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
                .owl-meteor{
                
                   width: 600px;
                   height: 300px;
                   background-color: black;
                   
                }
        .star {
            display: block;
            width: 1px;
            background: transparent;
            position: relative;
            opacity: 0;
            /*过渡动画*/
            
            animation: star-fall 3s linear infinite;
            -webkit-animation: star-fall 3s linear infinite;
            -moz-animation: star-fall 3s linear infinite;
        }
        .star:after {
            content: '';
            display: block;
            border: 0px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .5);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            /*变形*/
            
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
            transform-origin: 0% 100%;
            -webkit-transform-origin: 0% 100%;
            -moz-transform-origin: 0% 100%;
        }
        @keyframes star-fall {
            0% {
                opacity: 0;
                transform: scale(0.5) translate3d(0, 0, 0);
                -webkit-transform: scale(0.5) translate3d(0, 0, 0);
                -moz-transform: scale(0.5) translate3d(0, 0, 0);
            }
            50% {
                opacity: 1;
                transform: translate3d(-200px, 200px, 0);
                -webkit-transform: translate3d(-200px, 200px, 0);
                -moz-transform: translate3d(-200px, 200px, 0);
            }
            100% {
                opacity: 0;
                transform: scale(1.2) translate3d(-300px, 300px, 0);
                -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
                -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
            }
        }
         
                     
            </style>
        
          <div class="owl-meteor" id="meteor">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-meteor",OwlMeteor);



class PublicMethod {

    constructor(){



    }
    static  getColor(type){

        let _color="";
        switch (type) {

            case "default":
                _color="rgba(62,114,255,0.8)";
                break;
            case "secondary":
                _color="rgba(0,214,236,0.8)";
                break;
            case "danger":
                _color="rgba(255,0,43,0.8)";
                break;
            case "dark":
                _color="rgba(34,36,40,0.8)";
                break;
            case "light":
                _color="rgba(215,216,218,0.8)";
                break;
            case "success":
                _color="rgba(0,234,97,0.8)";
                break;
            case "warning":
                _color="rgba(255,209,0,0.8)";
                break;
            default:
                _color=type;
                break;
        }
        return _color;
    }



}


class OwlNotification extends PolymerElement {


    constructor(){

        super();
    }

    ready(){

        super.ready();
        let parentNode=this.parentNode;

        switch (this.position) {

            case "left":
                this.$._item.style.marginLeft=-(this.$._item.offsetWidth+20)+"px";
                this._changeAngle("left");
                break;
            case "right":
                this.$._item.style.marginLeft=parentNode.offsetWidth+20+'px';
                this.$._item.style.marginTop=-(this.$._item.offsetHeight/2-parentNode.offsetHeight/2)+'px';
                break;
            case "up":
                break;
            case "down":
                break;
            default:
                break;
        }

    }
    connectedCallback(){


        super.connectedCallback();


    }

    _changeAngle(position){




    }

    disconnectedCallback(){
        super.disconnectedCallback();


    }
    static get properties() { return {

        iconType:{

            type:String,
            value:'qq'
        },
        position:{

            type:String,
            value:"right"

        }

    }};


    _moodChange(newValue,oldValue){


    }


    static get template() {
        return html`
             <style>
             
             .owl-notic{
              width: 120px;
              height: 60px;
              background: white;
              position: absolute;
              border-radius: 8px;
              box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
              
             }
             .owl-notic:before {
                content: "";
                width: 0;
                box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
                height: 0;
                right: 100%;
                
                top: 20px;
                position: absolute;
                border-top: 12px solid transparent;
                border-right: 12px solid white;
                border-bottom: 13px solid transparent;
               
             }  
        
            </style>
   
       <div class="owl-notic" id="_item">
          <slot></slot>
       </div>
            
        `;
    }


}

customElements.define("owl-notic",OwlNotification);


class OwlTimeLine extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }

    ready(){

        super.ready();

        this.$._line.style.width=this.$._item.offsetWidth+'px';

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
              .owl-timeline{
                
                width: 500px;
                height: auto;
                /*background-color: n;*/
                display: flex;
                /*border: 1px solid rgba(120,120,120,0.9);*/
              }
             .owl-timeline-line{
              
                width: 100%;
                height: 4px;
                background-color: white;
                z-index: 80;
                position: absolute;
                margin-top: 13px;
              
              }
             
            </style>
        
           
           <div class="owl-timeline" id="_item">
           
            <slot></slot>
            <div class="owl-timeline-line" id="_line"></div>
              
           </div>
        
        `;
    }


}

customElements.define("owl-timeline",OwlTimeLine);


class OwlTimeLineItem extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }

    ready(){

        super.ready();
        this.$._ball.style.backgroundColor=this.color;

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        },
        color:{

            type:String,
            value:"yellowgreen"


        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
              .owl-timeline-item{
                
                width: 30px;
                height: 30px;
                background-color: white;
                border-radius: 50%;
                z-index: 100;
                position: relative;
                margin-left: 42px;
                margin-right: 42px;
              }
              .owl-timeline-item-ball{
            
                width: 20px;
                height: 20px;
                position: relative;
                margin-left: -10px;
                left: 50%;
                top: 50%;
                display: inline-block;
                margin-top: -10px;
                background-color: greenyellow;
                border-radius: 50%;
              
              }
     
             
            </style>
        
           <div class="owl-timeline-item">
               <div class="owl-timeline-item-ball" id="_ball"></div>
           </div>
             <p style="text-align: center"><slot></slot></p>
  
        `;
    }


}

customElements.define("owl-timeline-item",OwlTimeLineItem);


class OwlWave extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
              .owl-wave{
                
                  width: 400px;
                  height: 200px;
                  background-color: yellow;
                  position: relative;
                  align-items: center;
                  /*min-height: 100vh;*/
                  background-color: rgb(118, 218, 255);
                  overflow: hidden;
          
              }
              .owl-wave::before,owl-meteor::after{
              
                    content: "";
                    position: absolute;
                    left: 50%;
                    min-width: 200vw;
                    min-height: 200vw;
                    background-color: #fff;
                    animation-name: rotate;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
              }
              
           .owl-wave::before {
                bottom: 15vh;
                border-radius: 45%;
                animation-duration: 10s;
           }
         
            .owl-wave::after {
                bottom: 12vh;
                opacity: .5;
                border-radius: 47%;
                animation-duration: 10s;
            }

         
        @keyframes rotate {
            0% {
                transform: translate(-50%, 0) rotateZ(0deg);
            }
            50% {
                transform: translate(-50%, -2%) rotateZ(180deg);
            }
            100% {
                transform: translate(-50%, 0%) rotateZ(360deg);
            }
        }
                     
            </style>
        
          <div class="owl-wave">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-wave",OwlWave);


